const projection = ol.proj.get("EPSG:3857");
const TDTImgLayer = new ol.layer.Tile({
  title: "天地图矢量图层",
  source: new ol.source.XYZ({
    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
  }),
});
const TDTImgCvaLayer = new ol.layer.Tile({
  title: "天地图注记图层",
  source: new ol.source.XYZ({
    url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
  }),
});
const map = new ol.Map({
  target: "map",
  loadTilesWhileInteracting: true,
  view: new ol.View({
    center: [11430576, 3030575],
    zoom: 5,
    worldsWrap: true,
    minZoom: 1,
    maxZoom: 20,
    projection: projection,
  }),
  // 鼠标控件：鼠标在地图上移动时显示坐标信息。
  controls: ol.control.defaults().extend([
    // 加载鼠标控件
    new ol.control.MousePosition(),
  ]),
});
// 地图视图初始参数
const view = map.getView();
const zoom = view.getZoom();
const center = view.getCenter();
const rotation = view.getRotation();
// 缩小按钮
document.getElementById("zoom-out").onclick = function () {
  const view = map.getView(); // 获取地图视图
  const zoom = view.getZoom();
  view.setZoom(zoom - 1);
};
//放大按钮
document.getElementById("zoom-in").onclick = function () {
  const view = map.getView();
  const zoom = view.getZoom();
  view.setZoom(zoom + 1);
};
// 平移功能
document.getElementById("panto").onclick = function () {
  const view = map.getView();
  const wh = ol.proj.fromLonLat([105, 35]);
  view.setCenter(wh);
  view.setZoom(5);
};
// 复位功能
document.getElementById("restore").onclick = function () {
  const view = map.getView();
  view.setCenter(center);
  view.setRotation = rotation;
  view.setZoom = zoom;
};
// //为内置的缩放控件与旋转控件添加tool-tip提示信息
// $('.ol-zoom-in, .ol-zoom-out').tooltip({
//     placement: 'right' // tooltip在右侧显示
// })
// //为内置的缩放控件与旋转控件添加tool-tip提示信息
// $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
//     placement: 'left' // tooltip在左侧显示
// })

/**
 *矢量几何要素的样式
 */
const image = new ol.style.Circle({
  radius: 5,
  fill: null,
  stroke: new ol.style.Stroke({ color: "red", width: 1 }),
});
const styles = {
  Point: [
    new ol.style.Style({
      //点样式
      image: image,
    }),
  ],
  LineString: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //线的边界样式
        color: "green",
        width: 1,
      }),
    }),
  ],
  MultiLineString: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //多线的边界样式
        color: "green",
        width: 1,
      }),
    }),
  ],
  MultiPoint: [
    new ol.style.Style({
      //多点的点样式
      image: image,
    }),
  ],
  MultiPolygon: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //多区的边界样式
        color: "green",
        width: 1,
      }),
      fill: new ol.style.Fill({
        //多区的填充样式
        color: "rgba(255, 255, 0, 0.5)",
      }),
    }),
  ],
  Polygon: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //区的边界样式
        color: "blue",
        lineDash: [4],
        width: 3,
      }),
      fill: new ol.style.Fill({
        //区的填充样式
        color: "rgba(0, 0, 255, 0.1)",
      }),
    }),
  ],
  GeometryCollection: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //集合要素的边界样式
        color: "magenta",
        width: 2,
      }),
      fill: new ol.style.Fill({
        //集合要素的填充样式
        color: "magenta",
      }),
      image: new ol.style.Circle({
        //集合要素的点样式
        radius: 10,
        fill: null,
        stroke: new ol.style.Stroke({
          color: "magenta",
        }),
      }),
    }),
  ],
  Circle: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        //圆的边界样式
        color: "red",
        width: 2,
      }),
      fill: new ol.style.Fill({
        //圆的填充样式
        color: "rgba(255,0,0,0.2)",
      }),
    }),
  ],
};
const styleFunction = function (feature, resolution) {
  // 根据要素类型设置几何要素的样式
  return styles[feature.getGeometry().getType()];
};

// 加载天地图地图图层
function loadTdtMapLayer() {
  map.addLayer(TDTImgLayer)
  map.addLayer(TDTImgCvaLayer)
}

function log(obj) {
  console.log(obj)
}